<template>
	<s-layout title="群二维码名片" :bgStyle="{
		color:'#F6F6F6'
	}">
		<view class="group-ma">
			<view class="group-ingo">
				<image :src="cdn(groupInfo.groupProfile.avatar) || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'" mode="aspectFill"></image>
				<view class="group-name">
					{{ groupInfo.groupProfile.name }}
				</view>
			</view>
			<view class="ma">
				<image :src="'https://pageandy.liuliangbenben.top/qrcode/build?text='+ groupInfo.groupProfile.groupID" mode=""></image>
			</view>
			<view class="ma-tips">
				扫一扫加群聊
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {cdn,udid} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	
	const groupInfo = computed(() => $store().groupInfo);
	
</script>

<style lang="scss">
	.group-ma {
		width: calc(100% - 100rpx);
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;

		.group-ingo {
			display: flex;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
			}

			.group-name {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.ma {
			margin-top: 40rpx;
			text-align: center;

			image {
				width: calc(100% - 100rpx);
				margin: 0 auto;
				height: 500rpx;
			}
		}

		.ma-tips {
			width: 100%;
			text-align: center;
			margin-top: 40rpx;
			font-size: 28rpx;
			opacity: 0.5;
		}
	}
</style>